<template>
  <view class="parking-settings-page">
    <!-- 页面内容 -->

    <!-- 自动缴费区域 -->
    <view class="auto-payment-section">
      <view class="section-title">自动缴费</view>
      <view class="section-content">
        <text class="section-desc">停车费用产生后自动扣费</text>
        <view class="toggle-switch" @click="toggleAutoPayment">
          <view class="switch-track" :class="{ 'active': autoPaymentEnabled }">
            <view class="switch-thumb" :class="{ 'active': autoPaymentEnabled }"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他设置区域 -->
    <view class="other-settings-section">
      <view class="section-title">其他设置</view>
      <text class="section-subtitle">其他停车相关设置</text>
      
      <view class="settings-list">
        <view class="setting-item" @click="handleSetDefaultParking">
          <view class="setting-icon emoji-text">📍</view>
          <view class="setting-content">
            <text class="setting-title">默认停车场</text>
            <text class="setting-desc">设置常用的默认停车场</text>
          </view>
          <view class="setting-action">
            <text class="action-text">设置</text>
          </view>
        </view>
        
        <view class="setting-item" @click="handleSetDefaultVehicle">
          <view class="setting-icon emoji-text">🚗</view>
          <view class="setting-content">
            <text class="setting-title">默认车辆</text>
            <text class="setting-desc">设置常用的默认车辆</text>
          </view>
          <view class="setting-action">
            <text class="action-text">设置</text>
          </view>
        </view>
        
        <view class="setting-item" @click="handleClearSettings">
          <view class="setting-icon">🗑️</view>
          <view class="setting-content">
            <text class="setting-title">清除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 设置默认停车场弹窗 -->
    <view class="popup-overlay" v-if="showParkingPopup" @click="closeParkingPopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title">选择默认停车场</text>
          <text class="popup-close" @click="closeParkingPopup">×</text>
        </view>
        
        <view class="popup-body">
          <view 
            class="parking-option" 
            v-for="parking in parkingOptions" 
            :key="parking.id"
            @click="selectParking(parking)"
          >
            <text class="option-name">{{ parking.name }}</text>
            <text class="option-address">{{ parking.address }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 设置默认车辆弹窗 -->
    <view class="popup-overlay" v-if="showVehiclePopup" @click="closeVehiclePopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title">选择默认车辆</text>
          <text class="popup-close" @click="closeVehiclePopup">×</text>
        </view>
        
        <view class="popup-body">
          <view 
            class="vehicle-option" 
            v-for="vehicle in vehicleOptions" 
            :key="vehicle.id"
            @click="selectVehicle(vehicle)"
          >
            <text class="option-plate">{{ vehicle.plateNumber }}</text>
            <text class="option-brand">{{ vehicle.brand }} {{ vehicle.model }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 停车设置页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 停车设置功能页面，提供自动缴费、默认设置等功能
 */

import { ref, reactive, onMounted } from 'vue'

// 页面数据
const autoPaymentEnabled = ref(false)
const showParkingPopup = ref(false)
const showVehiclePopup = ref(false)

// 停车场选项
const parkingOptions = ref([
  {
    id: 1,
    name: '智慧社区A区停车场',
    address: 'A区地下1层'
  },
  {
    id: 2,
    name: '智慧社区B区停车场',
    address: 'B区地下1层'
  },
  {
    id: 3,
    name: '智慧社区地面停车场',
    address: '社区东侧地面'
  }
])

// 车辆选项
const vehicleOptions = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    brand: '大众',
    model: '帕萨特'
  },
  {
    id: 2,
    plateNumber: '京B67890',
    brand: '丰田',
    model: '凯美瑞'
  },
  {
    id: 3,
    plateNumber: '京C11111',
    brand: '本田',
    model: '雅阁'
  }
])

// 页面方法
const goBack = () => {
  uni.navigateBack()
}

const toggleAutoPayment = () => {
  autoPaymentEnabled.value = !autoPaymentEnabled.value
  uni.showToast({
    title: `自动缴费已${autoPaymentEnabled.value ? '开启' : '关闭'}`,
    icon: 'success'
  })
}

const handleSetDefaultParking = () => {
  showParkingPopup.value = true
}

const handleSetDefaultVehicle = () => {
  showVehiclePopup.value = true
}

const handleClearSettings = () => {
  uni.showModal({
    title: '确认清除',
    content: '是否清除所有停车设置？',
    success: (res) => {
      if (res.confirm) {
        autoPaymentEnabled.value = false
        uni.showToast({
          title: '设置已清除',
          icon: 'success'
        })
      }
    }
  })
}

const closeParkingPopup = () => {
  showParkingPopup.value = false
}

const closeVehiclePopup = () => {
  showVehiclePopup.value = false
}

const selectParking = (parking) => {
  uni.showToast({
    title: `已设置默认停车场：${parking.name}`,
    icon: 'success'
  })
  showParkingPopup.value = false
}

const selectVehicle = (vehicle) => {
  uni.showToast({
    title: `已设置默认车辆：${vehicle.plateNumber}`,
    icon: 'success'
  })
  showVehiclePopup.value = false
}

// 页面生命周期
onMounted(() => {
  // 页面加载完成
})
</script>

<style scoped>
.parking-settings-page {
  min-height: 100vh;
  background: #f5f5f5;
  width: 100%;
}

/* 页面头部样式已移除，使用uni-app默认导航栏 */

/* 自动缴费区域 */
.auto-payment-section {
  background: #fff;
  margin: 30rpx;
  margin-top: 50rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.section-title {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-desc {
  color: #666;
  font-size: 28rpx;
  flex: 1;
}

/* 开关样式 */
.toggle-switch {
  width: 100rpx;
  height: 60rpx;
}

.switch-track {
  width: 100rpx;
  height: 60rpx;
  background: #e0e0e0;
  border-radius: 30rpx;
  position: relative;
  transition: background-color 0.3s ease;
}

.switch-track.active {
  background: #409EFF;
}

.switch-thumb {
  width: 56rpx;
  height: 56rpx;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2rpx;
  left: 2rpx;
  transition: transform 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.switch-thumb.active {
  transform: translateX(40rpx);
}

/* 其他设置区域 */
.other-settings-section {
  background: #fff;
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  width: calc(100% - 60rpx);
  box-sizing: border-box;
}

.section-subtitle {
  color: #999;
  font-size: 24rpx;
  margin-bottom: 30rpx;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.setting-item:active {
  transform: scale(0.98);
  background: #e9ecef;
}

.setting-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.setting-content {
  flex: 1;
}

.setting-title {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.setting-desc {
  display: block;
  color: #666;
  font-size: 24rpx;
}

.setting-action {
  padding: 16rpx 24rpx;
  background: #409EFF;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 弹窗样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  width: 80%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.popup-title {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.popup-close {
  color: #999;
  font-size: 40rpx;
  font-weight: bold;
  cursor: pointer;
}

.popup-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.parking-option,
.vehicle-option {
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.parking-option:last-child,
.vehicle-option:last-child {
  border-bottom: none;
}

.parking-option:active,
.vehicle-option:active {
  background: #f8f9fa;
}

.option-name,
.option-plate {
  display: block;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.option-address,
.option-brand {
  display: block;
  color: #666;
  font-size: 24rpx;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .auto-payment-section,
  .other-settings-section {
    margin: 20rpx;
    width: calc(100% - 40rpx);
  }
  
  .settings-list {
    gap: 20rpx;
  }
  
  .setting-item {
    padding: 20rpx;
  }
}
</style>
